:root {
    --background-color: #2c3e50;
    --border-color: #7591AD;
    --text-color: #34495e;
    --color1: #EC3E27;
    --color2: #fd79a8;
    --color3: #0984e3;
    --color4: #00b894;
    --color5: #fdcb6e;
    --color6: #e056fd;
    --color7: #F97F51;
    --color8: #BDC581;
}

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 14px;
    box-sizing: border-box;
}

body {
    width: 100vw;
    height: 100vh;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei';
}

.loader {
    position: relative;
    width: 100px;
    height: 100px;
    color: #fff;
    /* 圆角形成圆形 */
    border-radius: 50%;
    /* 实现顶部圆弧 */
    border-top: 5px solid var(--color2);
    /* 解决loading转动时上下浮动问题
    主要原因是旋转的不是一个圆形，上方多了边框
    下方也增加边框让形状成为一个对称，转动时就不会浮动了
    如果使用box-sizing: border-box;应该也可以解决。
    好像不行，回头在研究，原理就是让旋转的元素成为一个对称的形状即可。
    */
    border-bottom: 5px solid transparent;
    /* background-color: turquoise; */
    /* 内容左右、上下居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 增加动画 */
    animation: animate .5s linear infinite;
}

.loader::after, .loader::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: -5px;
    border-radius: 50%;
    border-bottom: 5px solid transparent;
    /* background-color: wheat; */
}

.loader::after {
    /* 实现顶部圆弧 */
    border-top: 5px solid var(--color3);
    /* 旋转3分之一圈 */
    transform: rotate(120deg);
}

.loader::before {
    /* 实现顶部圆弧 */
    border-top: 5px solid var(--color6);
    /* 旋转3分之一圈 */
    transform: rotate(-120deg);
}

/* 创建动画关键帧，实现旋转 */

@keyframes animate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loader span{
    /* reverse的作用：还是同一个动画但是动画的方向是反着的 */
    animation: animate .5s linear infinite reverse;
}